<template>
  <div id="importAmountEchart" ref="importAmountRef">
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts/lib/echarts';
import {
  ref,
  defineProps,
  defineEmits,
  defineExpose,
  onMounted,
  getCurrentInstance,
  nextTick,
} from "vue";

const { proxy, ctx } = getCurrentInstance() as any;
const importAmountEchart = ref(null);
const importAmountRef = ref();

const xData = ["2021", "2022", "20203", "2024", "2025"];
const line = ["10", "30", "25.03", "36.01", "80.06"];
let backData:Array<string> = [];

backData = line.map(item => '100')
const lineData = line.map(item => ((item * 1) + 30) + '')

onMounted(() => {
  initImportAmountEchart();
});


// 初始化柱状图
function initImportAmountEchart() {
  importAmountEchart.value = echarts.init(importAmountRef.value);

  let option = {
    tooltip: {
      trigger: "item",
      padding: 1
    },

    grid: {
      left: "12%",
      top: "0%",
      right: "5%",
      bottom: "20%",
    },

    legend: {
      show: true,
      icon: "circle",
      orient: "horizontal",
      top: "90.5%",
      right: "center",
      itemWidth: 16.5,
      itemHeight: 6,
      // itemGap: 30,
      textStyle: {
        // color: '#FFFFFF'
        color: "#C9C8CD",
        fontSize: 14,
      },
    },
    xAxis: [
      {
        data: xData,
        axisLabel: {
          textStyle: {
            color: "#aaaaaa",
            fontSize: 12,
          },
          margin: 5, //刻度标签与轴线之间的距离。
        },

        axisLine: {
          show: false, //不显示x轴
        },
        axisTick: {
          show: false, //不显示刻度
        },
        boundaryGap: true,
        splitLine: {
          show: false,
          width: 0.08,
          lineStyle: {
            type: "solid",
            color: "#03202E",
          },
        },
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
          lineStyle: {
            color: "#eee",
            type: "solid",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#888",
          },
        },
      },
    ],
    series: [
      //柱体
      {
        name: "",
        type: "bar",
        barWidth: 30,
        barGap: "0%",
        itemStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: [
                {
                  //第一节下面
                  offset: 0,
                  color: "#145484",
                },
                {
                  offset: 1,
                  color: "#0b3d4e",
                },
              ],
            },

            label: {
              show: true,
              position: ['5%', '50%'],
              fontSize: 8,
              fontWeight: "bold",
              color: '#a9c1cc',
              formatter: function (p) {
                return (p.value * 1).toFixed(2) + "%";
              },
            },
          },  
        },

        data: line,
      },

      {
        name: "背景",
        type: "bar",
        barWidth: 30,
        barGap: "-100%",
        data: backData,
        z: -10,
        itemStyle: {
          normal: {
            color: "#0b172c",
          },
        },
      },

      //柱顶圆片
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [30, 10],
        symbolOffset: [0, -5],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#0d223f",
                },
                {
                  offset: 1,
                  color: "#114d7a",
                },
              ],
              false
            ),
          },
        },
        data: line,
      },

      // 折线图
      {
        type: 'line',
        name: '',
        data: lineData,
        symbolSize: 15,
        itemStyle: {
          normal: {
            borderWidth: 5,
            color: '#07545d',
          },
        },
      }
    ],
  };

  importAmountEchart.value?.setOption(option);

  window.addEventListener("resize", () => {
    importAmountEchart.value?.resize();
  });
}
</script>

<style scoped lang="scss">
#importAmountEchart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
